<template>
  <div id="content">
    <v-row :gutter="16" :style="{ margin: '12px 5px' }">
      <!-- 导航 -->
      <v-col class="gutter-row" span="8">
        <v-breadcrumb>
          <v-breadcrumb-item>
            <v-icon type="home"></v-icon>
            <router-link :to="{ name: 'Index' }">首页</router-link>
          </v-breadcrumb-item>
          <v-breadcrumb-item>
            <router-link :to="{ name: 'BookChapters', params: { bookId: this.$route.params.bookId }}">
              {{book.name}}
            </router-link>
          </v-breadcrumb-item>
          <v-breadcrumb-item>
            {{chapter.title}}
          </v-breadcrumb-item>
        </v-breadcrumb>
      </v-col>
      <!-- 顶部换肤 -->
      <v-col class="gutter-row" span="10" offset="6">
        <v-tag v-for="(color, $index) in colors" :key="$index" :color="color.value">
          <span @click="changeBg(color.value)" style="color: dimgray">{{ color.label }}</span>
        </v-tag>
      </v-col>
    </v-row>
    <!-- 内容 -->
    <v-card :title="chapter.title" no-hovering :loading="loading">
      <div v-html="content" :style="{'background-color': bgColor, 'color': color, 'padding': '25px 25px'}"></div>
    </v-card>
    <!-- 上一页、下一页 -->
    <v-row :gutter="16" style="margin-top: 20px;">
      <v-col class="gutter-row" span="2" offset="10" style="display: grid;">
        <v-button icon="left" @click="prev"></v-button>
      </v-col>
      <v-col class="gutter-row" span="2" style="display: grid;">
        <v-button icon="right" @click="next"></v-button>
      </v-col>
    </v-row>
    <!-- 回到顶部 -->
    <v-back-top></v-back-top>
  </div>
</template>

<script>
/**
 * 背景色
 */
function getBgColor() {
  const bgColor = localStorage.getItem("bgColor");
  if (bgColor) {
    return bgColor;
  }
  return "#FAF9DE";
}

function setBgColor(bgColor) {
  localStorage.setItem("bgColor", bgColor);
}

/**
 * 字体色
 */
function getColor() {
  const color = localStorage.getItem("color");
  if (color) {
    return color;
  }
  return "#000000";
}

function setColor(color) {
  localStorage.setItem("color", color);
}

export default {
  name: "BookContent",
  data() {
    return {
      bookId: this.$route.params.bookId,
      chapterId: this.$route.params.chapterId,
      book: {},
      chapter: {},
      content: "",
      loading: true,
      /**
       * 河白色 #FFFFFF rgb(255, 255, 255)
       * 杏仁黄 #FAF9DE rgb(250, 249, 222)
       * 秋叶褐 #FFF2E2 rgb(255, 242, 226)
       * 胭脂红 #FDE6E0 rgb(253, 230, 224)
       * 青草绿 #E3EDCD rgb(227, 237, 205)
       * 海天蓝 #DCE2F1 rgb(220, 226, 241)
       * 葛巾紫 #E9EBFE rgb(233, 235, 254)
       * 极光灰 #EAEAEF rgb(234, 234, 239)
       * 夜间黑 #000000 rgb(000, 000, 000)
       */
      colors: [
        { value: "#FFFFFF", label: "河白色" },
        { value: "#FAF9DE", label: "杏仁黄" },
        { value: "#FFF2E2", label: "秋叶褐" },
        { value: "#FDE6E0", label: "胭脂红" },
        { value: "#E3EDCD", label: "青草绿" },
        { value: "#DCE2F1", label: "海天蓝" },
        { value: "#E9EBFE", label: "葛巾紫" },
        { value: "#EAEAEF", label: "极光灰" },
        { value: "#000000", label: "夜间黑" },
      ],
      // 背景色
      bgColor: getBgColor(),
      // 字体色
      color: getColor()
    };
  },
  mounted() {
    this.loadBook();
    this.loadChapter();
    this.loadData();
  },
  methods: {
    changeBg(color) {
      this.bgColor = color;
      // 黑色背景把字体调成白色，否则字体色为黑色
      if (color == "#000000") {
        this.color = "#ffffff";
        setColor(this.color);
      } else {
        this.color = "#000000";
        setColor(this.color);
      }
      setBgColor(color);
    },
    loadBook() {
      const url = "/book/" + this.bookId;
      this.$get(url).then(data => {
        if (data) {
          this.book = data;
        } else {
          this.$message["error"]("书籍不存在");
        }
      });
    },
    loadChapter() {
      const url = "/chapter/" + this.chapterId;
      this.$get(url).then(data => {
        if (data) {
          this.chapter = data;
        } else {
          this.$message["error"]("章节不存在");
        }
      });
    },
    loadData() {
      const url = "/chapter/" + this.chapterId + "/content";
      this.$get(url, {}, false, {
        "View-BookId": this.bookId
      }).then(data => {
        if (data) {
          this.content = data.content;
          this.loading = !this.loading;
        } else {
          this.$message["error"]("章节不存在");
          this.loading = !this.loading;
        }
      });
    },
    prev() {
      this.prevOrNext("prev", "已经到达第一章啦～");
    },
    next() {
      this.prevOrNext("next", "已经到达最后一章啦～");
    },
    prevOrNext(op, msg) {
      const params = {
        bookId: this.bookId,
        currentChapterId: this.chapterId
      };
      this.$get("/content/" + op, params).then(data => {
        if (data) {
          this.$router.push({
            name: "BookContent",
            params: { bookId: this.bookId, chapterId: data.chapterId }
          });
          // 刷新页面
          this.$router.go(0);
        } else {
          this.$message["warning"](msg);
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
#content .ant-card{
  background-color: #ececec;
}
#content .ant-card-head-title {
  font-size: 14px;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  float: none;
  text-align: center;
}
#content .ant-card-body {
  margin: 0% 15%;
  font-size: 16px;
  padding: 0px;
}
</style>
